import { useData, SideMenu, Icon, Page } from "@/components";
import { useEffect, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom"
import { exemplesNameList } from "../../routes";
import styles from './styles.module.less'

const Exemples = () => {
  let navigate = useNavigate();

  const [visible, setVisible] = useState(true)

  const data = useData({
    menuTree: exemplesNameList.map((exemple) => {
      const title = exemple.name?.replace(/Exemple/, '').split('').map((item, index) => {
        if (index === 0) {
          return item.toUpperCase()
        } else {
          return item
        }
      }).join('')

      return {
        title: title,
        activeKey: exemple.path,
        icon: 'bars',
      }
    })
  })

  const setVisibleFn = () => {
    if (visible && window.innerWidth < 800) {
      setVisible(false)
    }
    if (!visible && window.innerWidth > 800) {
      setVisible(true)
    }
  }

  window.addEventListener('resize', (e) => {
    setVisibleFn()
  })
  useEffect(() => {
    setVisibleFn()
  }, [])

  const location = useLocation()


  return (
    <Page pageBody={{ padding: false }} >
      <div
        className={styles.exemples}
        style={{
          gridTemplateColumns: `${visible ? 'auto' : 0} 1fr`
        }}
      >
        <div
          className={styles.aside}
          style={{
            transform: visible ? 'translateX(0)' : `translateX(-100%)`
          }}
        >
          <SideMenu
            className={styles.sideMenu}
            activeMenuItemChange={(menuItems) => {
              navigate(`${menuItems?.[0]}`);
            }}
            defaultActiveKeys={[location.pathname]}
            menuTree={data.menuTree}
            borders={['right']}
          >
          </SideMenu>
          <Icon
            onClick={() => {
              setVisible(!visible)
            }}
            icon="bars"
            size={22}
            className={styles.sideMenuOff}
          ></Icon>
        </div>
        <div
          className={styles.content}
          onClick={() => {
            if (window.innerWidth <= 800) {
              setVisible(false)
            }
          }}
        >
          <Outlet />
        </div>
      </div>

    </Page >
  )
}
export default Exemples